<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>商品列表</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
</head>

<body>
  <div class="header container">
    仿站电商 · 商品列表
    <p style="display: block;">
      <a href="./index.html">回到首页</a>
    </p>
  </div>

  <div class="filter container">
    <div class="cateBox">
      <p>分类</p>
      <ul class="category">
        <!-- js渲染 -->
      </ul>
    </div>
    <div class="cateBox">
      <p>筛选</p>
      <ul class="filterBox hotBox">
        <li data-type='' class="active">全部</li>
        <li data-type='hot'>热销</li>
        <li data-type='sale'>折扣</li>
      </ul>
    </div>
    <div class="cateBox">
      <p>折扣</p>
      <ul class="filterBox saleBox">
        <li data-type="10" class="active">全部</li>
        <li data-type="5">5折</li>
        <li data-type="6">6折</li>
        <li data-type="7">7折</li>
        <li data-type="8">8折</li>
        <li data-type="9">9折</li>
      </ul>
    </div>
    <div class="cateBox">
      <p>排序</p>
      <ul class="filterBox sortBox">
        <li data-type="id" data-method="ASC" class="active">综合 正序</li>
        <li data-type="id" data-method="DESC">综合 倒序</li>
        <li data-type="sale" data-method="ASC">折扣 正序</li>
        <li data-type="sale" data-method="DESC">折扣 倒序</li>
        <li data-type="price" data-method="ASC">价格 正序</li>
        <li data-type="price" data-method="DESC">价格 倒序</li>
      </ul>
    </div>
    <div class="cateBox">
      <p>搜索</p>
      <input type="text" class="search">
    </div>
  </div>

  <div class="pagination container">
    <span class="first disable">首页</span>
    <span class="prev disable">上一页</span>
    <p class="total">1 / 10</p>
    <span class="next">下一页</span>
    <span class="last">末页</span>
    <input type="number" class="jump" value="1"><button class="go">跳转</button>
    <select class="pagesize">
      <option value="12">12</option>
      <option value="16">16</option>
      <option value="20">20</option>
      <option value="24">24</option>
    </select>
  </div>

  <ul class="list container">
    <!-- 如果筛选或搜索中 没有商品则展示一下图片 -->
    <!-- <img src="./img/no.png"> -->
    <!-- js渲染的数据 -->
    <li data-id="3">
      <div class="show">
        <img src="https://image4.suning.cn/uimg/b2c/newcatentries/0070081143-000000000131021736_2_800x800.jpg">
        <span class="hot">热销</span>
        <span>折扣</span>
      </div>
      <div class="info">
        <p class="title">南极人 【5双礼盒装】男士袜子中筒棉袜四季商务袜透气袜子男P3014</p>
        <p class="price">
          <span class="curr">¥ 17.40</span>
          <span class="old">¥ 29.00</span>
        </p>
      </div>
    </li>
  </ul>
  <div class="footer container">页面底部</div>
 
  <script type="module">
    import '../lib/axios.js'
    import '../lib/layui/layui.js'
    var $ = layui.$;
    var layer = layui.layer

    axios.get('http://localhost:9000/goods/category').then(res => {
      if (res.data.code === 1) {
        var html = ''
        res.data.list.forEach((item, index) => {
          var liClass = index === 0 ? 'class="active"' : '';
          html += `<li ${liClass}>${item}</li>`;
        })
        $('.category').html(html);
      } else {
        layer.msg(res.data.message)
      }
    })

    $('.category').on('click', 'li', function () {
      // 移除所有li的active类
      $('.category li').removeClass('active');
      // 为当前点击的li添加active类
      $(this).addClass('active');

      params.category = $(this).text();
      getList();
    });

    var params = {
      current: 1, // 当前页数
      pagesize: 12, // 每页数量
      category: '', // 分类
      filter: '', // 筛选类型
      saleType: 10, // 折扣类型
      sortType: 'id', // 排序类型
      sortMethod: 'ASC', // 排序顺序
      search: '' // 搜索关键词
    };

    $('.saleBox li').on('click', function () {
      $('.saleBox li').removeClass('active');
      // 为当前点击的li添加active类
      $(this).addClass('active');
      var saleType = $(this).data('type');
      params.saleType = saleType;
      params.page = 1;
      getList();
    });

    $('.hotBox li').on('click', function () {
      $('.hotBox li').removeClass('active');
      // 为当前点击的li添加active类
      $(this).addClass('active');
      var filterType = $(this).data('type');
      params.filter = filterType;
      params.page = 1;
      getList();
    });

    $('.sortBox li').on('click', function () {
      $('.sortBox li').removeClass('active');
      // 为当前点击的li添加active类
      $(this).addClass('active');
      var sortType = $(this).data('type');
      var sortOrder = $(this).data('method');
      params.sortType = sortType;
      params.sortMethod = sortOrder;
      params.page = 1;
      getList();
    });

    $('.search').on('blur', function () {
        params.search = $(this).val();
        params.current = 1;
        getList();
    });

    $('.go').on('click', function () {
      var pageNum = parseInt($('.jump').val());
      if (!isNaN(pageNum)) {
        params.current = pageNum;
        getList();
      }
    });

    $('.pagesize').on('change', function () {
      params.limit = parseInt($(this).val());
      params.current = 1; // 重置页码
      getList();
    });

    function getList() {
      axios.get('http://localhost:9000/goods/list', { params }).then(res => {
        if (res.data.code === 1) {
          console.log(res)
          var html = ''
          const products = res.data.list;
          products.forEach((product, index) => {

            html += `
          <li data-id="${product.goods_id}">
            <div class="show">
              <img src="${product.img_big_logo}">
              ${product.is_hot ? `<span class="hot">热销</span>` : ''}
              ${product.is_sale ? `<span>折扣</span>` : ''}
            </div>
            <div class="info">
              <p class="title">${product.title}</p>
              <p class="price">
                <span class="curr">¥ ${product.current_price}</span>
               <span class="old">¥ ${product.price}</span>
              </p>
            </div>
          </li>
        `;
          })
          $('.list.container').html(html);
          $('.total').html(`${params.current}/${res.data.total}`)
        } else {
          layer.msg(res.data.message)
        }
      })
    }

    getList()

    $('.list').on('click', 'li', function () {
      var id = $(this).data('id');
      layui.data('goods', {
        key: 'id',
        value: id
      })
      location.href = './detail.html'
    })

  </script>
</body>


</html>